<template>
	<view class="pad-16r">
		<view class="notice-item" v-for="(item, idx) in notices" :key="idx" @click="handleRead(item)">
			<view class="notice-header">
				<view class="notice-title">{{ item.name }}</view>
				<view class="flex-start">
					<view class="notice-time">{{ item.createTime }}</view>
					<view :class="item.readStatus==1?'':'active'"></view>
				</view>
			</view>
			<view class="notice-content">{{ item.describe }}</view>

			<!-- 复诊提醒专属按钮 -->
			<view v-if="item.title === '复诊提醒'" class="button-container">
				<view class="btn-outline">去挂号</view>
				<view class="btn-solid">检验检查缴费</view>
			</view>

		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	import {
		selectMessageRead,
		addBatch
	} from '../../api/messageRead';
	export default {
		name: "NoticePage",
		computed: {
			...mapGetters(['hostApi', "userInfo"])
		},
		data() {
			return {
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '加载更多...',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				page: 1,
				size: 10,
				notices: []
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				// 消息类型 1指定患者可以看到 2指定医生可以看到 3指定科室医护人员可以看到 4指定院区所有人可以看到 
				let query = {
					patId: this.userInfo.patId,
					orderBy: 'create_time desc',
					types: [1, 4],
					page: this.page,
					size: this.size
				}
				selectMessageRead(query).then(res => {
					console.log(res)
					if (res.data.length == 0) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
						this.notices = [...this.notices, ...res.data];

					}
				})
			},
			loadmore() {
				this.page = this.page + 1
				this.init();
			},
			// 点击当前信息标识已读
			handleRead(item) {
				let list = []
				list.push({
					messageId: item.id,
					patId: this.userInfo.patId,
					id: item.readId
				})
				addBatch({
					list: list
				}).then(res => {
					let query = {
						patId: this.userInfo.patId,
						orderBy: 'create_time desc',
						types: [1, 4],
						page: this.page,
						size: this.size * this.page
					}
					selectMessageRead(query).then(res => {
						this.notices = res.data;
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.notice-list {
		margin: 0 28rpx;
		padding-top: 28rpx;
	}

	.notice-item {
		background: transparent;
		padding: 18rpx 16rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 0 5px 1000px 1rpx #e0e2e7;
		margin: 16rpx 0;
		border-radius: 10px;
		background-color: white;
	}

	.notice-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.notice-title {
		font-size: 34rpx;
		color: #222;
	}

	.notice-time {
		font-size: 24rpx;
		color: #bbb;
	}

	.notice-content {
		font-size: 28rpx;
		color: #666;
		margin: 12rpx 0 0 0;
		padding: 0 8rpx;
		line-height: 1.7;
	}

	.notice-divider {
		border-bottom: 1rpx solid #eaeaea;
		margin: 32rpx 0 0 0;
	}

	.button-container {
		display: flex;
		margin-top: 32rpx;
		justify-content: flex-end;
		gap: 44rpx;
		width: 100%;
		margin-right: 10rpx;
	}

	.btn-outline,
	.btn-solid {
		width: 180rpx;
		height: 50rpx;
		font-size: 26rpx;
		border-radius: 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	.btn-outline {
		background: #fff;
		color: #1cc6e7;
		border: 2rpx solid #1cc6e7;
	}

	.btn-solid {
		background: linear-gradient(90deg, #5ee2f7 0%, #1cc6e7 100%);
		color: #fff;
		border: none;
	}

	.active {
		position: fixed;
		right: 10px;
		width: 10px;
		height: 10px;
		background-color: red;
		border-radius: 10rpx;
		margin-top: -8px;
	}
</style>